import React, { lazy, useEffect } from "react"
import { Layout } from "antd"

import { Outlet, useNavigate } from "react-router-dom"
import cookies from "@/utils/cookies"
const Header = lazy(() => import("../../components/Header"))
const Leftnavs = lazy(() => import("../../components/Leftnav"))

const { Footer, Sider, Content } = Layout

export default function Admin() {
  const navigate = useNavigate()

  useEffect(() => {
    const token = cookies.get("react-token")
    if (!token) {
      navigate("/login", {
        replace: true,
      })
    }
  }, [navigate]) 

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider>
        <Leftnavs />
      </Sider>
      <Layout>
        <Header></Header>
        <Content style={{ margin: 20, backgroundColor: "#fff" }}>
          <Outlet />
        </Content>
        <Footer style={{ textAlign: "center", color: "#ccc" }}>
          推荐使用谷歌浏览器，可以获得更佳的页面操作感
        </Footer>
      </Layout>
    </Layout>
  )
}
